<template>
    <p>
        <el-button type="primary" @click="state.showAdd=!state.showAdd">增加</el-button>&nbsp;&nbsp;

        &nbsp;&nbsp;
        <el-upload
            style="display:inline;width:60px;"
            action="/api/stu/importAdd"
            :show-file-list="false"
            :auto-upload="true"
            :on-success="uploadSuccess"
        >
            <el-button type="primary">批量导入</el-button>
        </el-upload>

        &nbsp;&nbsp;&nbsp;
        <el-button type="danger" @click="delChecked">删除选中</el-button>
        &nbsp;&nbsp;&nbsp;
        姓名：<el-input style="width:150px;" v-model="state.nameKey"></el-input>
        &nbsp;&nbsp;
        <el-button icon="search" type="primary" @click="init()"></el-button>
    </p>

    <el-table ref="tableRef" stripe  :data="state.tableData" style="display:flex" border >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="sno" label="学号" width="100"></el-table-column>
        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
        <el-table-column prop="gender" label="性别" width="100"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column  label="操作" width="160">
            <template #default="scope">
                <el-button type="danger" @click="del(scope.row.id)" circle icon="delete"></el-button>
                <el-button type="primary" circle icon="edit"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background style="margin-top:30px;"
                   :total="state.total" :current-page="state.page"
                   :page-size="state.limit"
                   @current-change="jump"
                   layout="total,prev,pager,next,jumper"></el-pagination>


    <el-dialog v-model="state.showAdd" title="增加"
               style="height:400px" width="40%">
        <el-form label-width="120">
            <el-form-item label="学号">
                <el-input v-model="addForm.sno" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="addForm.name" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="addForm.gender">
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addForm.email" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="addForm.telephone" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doAdd">确认</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance } from 'vue'
import axios from '@/utils/axios'
import { useRouter } from 'vue-router'
//定义响应式变量
const state = reactive({
    page:1,
    limit:5,
    total:0,
    tableData:[],  //表格 的数据
    nameKey:null,  //搜索关键字
    showAdd:false, //控制增加对话框的显示隐藏
})
const tableRef =ref(); //定义一个响应式变量
const addForm = reactive({
    sno:3000 + parseInt(Math.random()*10000),
    name:'小明' + parseInt(Math.random()*100000),
    gender:parseInt(Math.random()*100) > 50 ? '男' : '女',
    email:parseInt(Math.random()*10000000) + '@qq.com',
    telephone:'1817' + parseInt(Math.random()*10000000)
})
const jump = (val) => {
    state.page = val;
    init();
}

const del = (id) => {
    axios.post("/api/stu/del?id="+id)
        .then(res => {
            location.reload();
        })
}
//初始化数据
const init = () => {
    axios.post("/api/stu/page", {
        page:state.page,
        limit:state.limit,
        name:state.nameKey
    }).then(res => {
        state.total =  res.data.total;
        state.tableData = res.data.records;
    })
}


const delChecked = () => {
    const sels = tableRef.value.getSelectionRows();//获取选中的数据
    const ids = sels.map(obj => obj.id);// 只取 id
    axios.post("/api/stu/delChecked", {"ids":ids})
        .then(res=>{
            location.reload();
        })
}

const uploadSuccess = () => {
    location.reload();
}

const doAdd = () => {
    axios.post("/api/stu/add", addForm)
        .then(res => {
            if (res.code == 200){
                ElMessage({
                    message:res.msg,
                    onClose:()=>{
                        location.reload();
                    }
                })
            }
            else{
                ElMessage({
                    message:res.msg
                })
            }
        })
}


//钩子函数，生命周期函数,加载时自动调用
onMounted(()=>{
    init();
})
</script>

<style scoped>

</style>
